<template>
  <div class="home">
    <div class="home-warpper flex">
      <div class="main-left f-shrink-0">
        <div
          class="left-card flex h-column"
          :class="{ active: leftActive == item.type }"
          v-for="(item, index) in leftList"
          :key="index"
          @click="chooseLeft(item)"
        >
          <div class="left-title flex h-center w-between f-shrink-0">
            <div class="title-icon flex h-center">
              <img :src="item.icon" />
              <span>{{ item.title }}</span>
            </div>
            <!-- <div class="title-progress flex h-center">
              <span>作业进度：</span>
              <em class="flex h-center">{{ item.progresss }}%</em>
            </div> -->
          </div>
          <div class="item-list flex-1 flex h-center w-end">
            <div
              class="left-item flex-1 flex h-column h-center w-center"
              v-for="(child, childInx) in item.list"
              :key="childInx"
            >
              <label>{{ child.value }}{{ child.unit ? child.unit : "" }}</label>
              <span>{{ child.label }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="main-right flex-1">
        <div ref="container" class="map" />
        <div class="card-wrapper flex" v-if="leftActive">
          <div
            v-for="(item, index) in cardList"
            :key="index"
            class="card flex-1 flex h-column"
          >
            <div class="card-title f-shrink-0 flex h-center w-center">
              <i :style="{ background: item.color }"></i>
              <span>{{ item.title }}</span>
            </div>
            <div class="card-list f-shrink-0">
              <div
                class="card-item flex h-center w-between"
                v-for="(child, chindInx) in formList"
                :key="chindInx"
              >
                <span>{{ child.label }}</span>
                <em class="f-shrink-0">
                  {{ item.data[child.field] }} {{ child.unit }}
                </em>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  homePageOverview,
  lampCommunityCount,
  cleaningCommunityCount,
  toiletCommunityCount,
  roadGreeningCommunityCount,
  parkCommunityCount,
  recycleCommunityCount,
  garbageSortingCommunityCount,
  disinfectionCommunityCount,
  maintenanceCommunityCount,
  toiletQueryToilet,
  parkQueryPark,
} from "@/api/index/index";
import { getDicts as getDicts } from "@/api/system/dict/data";
import { LEFT_LIST } from "./constant.js";
import regionJson from "./index.json";
import markerJson1 from "./index1.json";
import markerJson2 from "./index2.json";
import markerJson3 from "./index3.json";
import markerJson4 from "./index4.json";
import markerJson5 from "./index5.json";
import markerJson6 from "./index6.json";
import markerJson7 from "./index7.json";
import markerJson8 from "./index8.json";
import markerJson9 from "./index9.json";
export default {
  name: "Index",
  data() {
    return {
      // 地图实例
      BMap: null,
      map: null,
      // 其他地区是否蒙层
      isMask: false,
      // 左侧信息数组
      leftList: JSON.parse(JSON.stringify(LEFT_LIST)),
      // 左侧选中
      leftActive: null,
      // 右侧信息维度
      cardList: [
        {
          title: "玉律社区",
          color: "#FF5733",
          data: {},
        },
        {
          title: "田寮社区",
          color: "#43CF7C",
          data: {},
        },
        {
          title: "长圳社区",
          color: "#FFEB3B",
          data: {},
        },
        {
          title: "红星社区",
          color: "#2A82E4",
          data: {},
        },
        {
          title: "玉塘社区",
          color: "#4DD5FF",
          data: {},
        },
      ],
      // 右侧信息公园管养表单
      parkForm: [
        {
          label: "公园",
          field: "parkNameCountBoList",
          unit: "个",
          // 取数组累加统计
          is_reduce: true,
          // 数组对象中的数量key字段
          lenField: "parkNameCount",
        },
      ],
      // 右侧信息垃圾收运表单
      recycleForm: [
        {
          label: "收运点",
          field: "recyclePointCountBoList",
          unit: "个",
          // 取数组累加统计
          is_reduce: true,
          // 数组对象中的数量key字段
          lenField: "recyclePointCount",
        },
      ],
      // 右侧信息公共表单
      commonForm: [
        {
          label: "作业人员",
          field: "workmanCommunity",
          unit: "人",
          // 固定值
          is_regular: true,
        },
        {
          label: "作业车辆",
          field: "vehicleCount",
          unit: "辆",
          // 固定值
          is_regular: true,
        },
        {
          label: "作业设备",
          field: "toolCount",
          unit: "个",
          // 固定值
          is_regular: true,
        },
      ],
      // 右侧信息表单
      formList: [],
      // 地图标记点数据
      markerJsonMap: {
        1: markerJson1,
        2: markerJson2,
        3: markerJson3,
        4: markerJson4,
        5: markerJson5,
        6: markerJson6,
        7: markerJson7,
        8: markerJson8,
        9: markerJson9,
      },
    };
  },
  created() {},
  beforeDestroy() {},
  mounted() {
    // console.log(this.leftList);
    this.getLeftList();
    this.$nextTick(() => {
      var ak = process.env.VUE_APP_BAIDUMAPAK;
      this.loadBMap(ak).then(() => {
        const map = new BMap.Map(this.$refs.container);
        this.map = map;
        var point = new BMap.Point(113.90893, 22.73584);
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);
        // 设置地图类型为普通卫星地图模式
        map.setMapType(BMAP_SATELLITE_MAP);
        // 添加控件
        this.mapControl(point);
        // map.addControl(
        //   new BMap.NavigationControl({
        //     type: BMAP_NAVIGATION_CONTROL_ZOOM, //表示只显示控件的缩放部分功能。
        //     offset: new BMap.Size(15, 50),
        //   })
        // );

        if (this.isMask) {
          // 给玉塘街道以外的区域设置遮罩层
          this.mapMask();
        }

        this.mapRegion();
      });
    });
  },
  methods: {
    // 加载地图
    loadBMap(akValue) {
      return new Promise((resolve) => {
        const loadmap = document.getElementsByClassName("loadmap");
        if (loadmap) {
          // 每次append script之前判断一下，避免重复添加script资源标签
          for (let i = 0; i < loadmap.length; i++) {
            document.body.removeChild(loadmap[i]);
          }
        }
        // 此处在所需页面引入资源就是，不用再public/index.html中引入
        const script = document.createElement("script");
        script.type = "text/javascript";
        script.className = "loadmap"; // 给script一个类名
        script.src = `https://api.map.baidu.com/getscript?v=3.0&ak=${akValue}`;
        // 此处需要注意：申请ak时，一定要应用类别一定要选浏览器端，不能选服务端，不然地图会报ak无效
        script.onload = () => {
          // 使用script.onload，待资源加载完成，再初始化地图
          resolve();
        };

        document.body.appendChild(script);
      });
    },
    mapMask() {
      // 给玉塘街道以外的区域设置遮罩层
      const arr = [];
      const reginArr = regionJson.coordinates[0][0];
      reginArr.forEach((el) => {
        arr.push(new BMap.Point(el[0], el[1]));
      });
      let areaArr = [];
      for (var i = 0; i < arr.length; i++) {
        let str = arr[i].lng + "," + arr[i].lat;
        areaArr.push(str);
      }
      var ENWS = "";
      for (var i = 0; i < areaArr.length; i++) {
        ENWS += areaArr[i] + ";";
      }
      //2.自定义外围边框点的集合
      var E_JW = "170.672126, 39.623555;"; //东
      var EN_JW = "170.672126, 81.291804;"; //东北角
      var N_JW = "105.913641, 81.291804;"; //北
      var NW_JW = "-169.604276,  81.291804;"; //西北角
      var W_JW = "-169.604276, 38.244136;"; //西
      var WS_JW = "-169.604276, -68.045308;"; //西南角
      var S_JW = "114.15563, -68.045308;"; //南
      var SE_JW = "170.672126, -68.045308 ;"; //东南角
      //3.添加环形遮罩层
      var ply1 = new BMap.Polygon(
        ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW,
        {
          strokeColor: "none",
          strokeOpacity: 0,
          fillColor: "#fff",
          fillOpacity: "0.3",
        }
      );
      // 设置覆盖物不被清除
      ply1.disableMassClear();
      //建立多边形覆盖物
      this.map.addOverlay(ply1);
    },
    mapRegion() {
      // 渲染区域
      const mapArr = [];
      regionJson.features.forEach((item) => {
        const mapRegion = item.geometry.coordinates[0][0];
        const arr = [];
        mapRegion.forEach((el) => {
          arr.push(new BMap.Point(el[0], el[1]));
          mapArr.push(new BMap.Point(el[0], el[1]));
        });
        const current = this.cardList.find(
          (el) => el.title == item.properties.name
        );
        let color = "#2A82E4";
        if (current) {
          color = current.color;
        }
        // 绘制覆盖物
        const polygon = new BMap.Polygon(arr, {
          strokeColor: color,
          fillColor: this.isMask ? "" : color,
          strokeWeight: this.isMask ? 3 : 2,
          strokeOpacity: this.isMask ? 1 : 0.8,
          fillOpacity: this.isMask ? 0 : 0.3,
        });
        // 设置覆盖物不被清除
        polygon.disableMassClear();
        // 添加文本
        const opts = {
          position: new BMap.Point(
            this.getCenterPoint(mapRegion).lng,
            this.getCenterPoint(mapRegion).lat
          ), // 指定文本标注所在的地理位置
          offset: new BMap.Size(-40, -10), // 设置文本偏移量
        };
        const label = new BMap.Label(item.properties.name, opts); // 创建文本标注对象
        label.setStyle({
          color: "#fff",
          backgroundColor: "transparent", // 文本背景色
          borderColor: "transparent", // 文本框边框色
          fontSize: this.isMask ? "16px" : "14px",
          height: "20px",
          lineHeight: "20px",
          fontWeight: "bolder",
          fontFamily: "微软雅黑",
        });
        // 设置覆盖物不被清除
        label.disableMassClear();

        this.map.addOverlay(polygon);
        this.map.addOverlay(label);
      });
      // 定位相应缩放
      const view = this.map.getViewport(mapArr);
      this.map.centerAndZoom(view.center, view.zoom);
    },
    mapControl(point) {
      // 添加控件
      // 定义一个控件类,即function
      function ZoomControl() {
        // 默认停靠位置和偏移量
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(10, 10); // 距离左上角位置
      }
      //通过JavaScript的prototype属性继承于BMap.Control
      ZoomControl.prototype = new BMap.Control();
      //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
      //在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
      ZoomControl.prototype.initialize = function (map) {
        //创建一个dom元素
        var div = document.createElement("div");
        //添加文字说明
        div.style.backgroundColor = "#ffffff";
        div.style.backgroundImage =
          "url(" + require(`@/assets/images/home/posi-icon.png`) + ")";
        div.style.backgroundSize = "100% 100%";
        // 设置样式
        div.style.height = "30px";
        div.style.width = "30px";
        div.style.color = "black";
        div.style.fontSize = "10px";
        div.style.cursor = "pointer";
        div.style.padding = "7px 10px";
        div.style.boxShadow = "0 2px 6px 0 rgba(255, 255, 255, 0.5)";
        div.style.borderRadius = "5px";

        // 绑定事件,地图回到中心点，point事先已经定义好
        div.onclick = function (e) {
          map.centerAndZoom(point, 15);
        };
        // 添加DOM元素到地图中
        map.getContainer().appendChild(div);
        // 将DOM元素返回
        return div;
      };
      // 创建控件实例
      var myZoomCtrl = new ZoomControl();
      // 添加到地图当中
      this.map.addControl(myZoomCtrl);
    },
    getCommunityCount() {
      // 获取右侧统计数据
      // 接口方法
      let request = "";
      // 数据字段key
      let dataKey = "";
      // label字段key
      let labelKey = "";
      // value字段key
      let valueKey = "";
      switch (+this.leftActive) {
        case 1:
          // 路灯管养
          request = lampCommunityCount;
          dataKey = "lampTypeBoList";
          labelKey = "lampType";
          valueKey = "lampCount";
          break;
        case 2:
          // 清扫保洁
          request = cleaningCommunityCount;
          dataKey = "cleaningRoadTypeBoList";
          labelKey = "roadType";
          valueKey = "areaSum";
          break;
        case 3:
          // 市政公厕管养
          request = toiletCommunityCount;
          dataKey = "toiletTypeBoList";
          labelKey = "toiletType";
          valueKey = "toiletCount";
          break;
        case 4:
          // 道路绿化管养
          request = roadGreeningCommunityCount;
          dataKey = "roadGreeningTypeBoList";
          labelKey = "maintenanceType";
          valueKey = "areaOrNum";
          break;
        case 5:
          // 公园管养
          request = parkCommunityCount;
          dataKey = "parkTypeBoList";
          labelKey = "maintenanceType";
          valueKey = "parkArea";
          break;
        case 6:
          // 垃圾收运
          request = recycleCommunityCount;
          dataKey = "recycleTypeBoList";
          labelKey = "garbageType";
          valueKey = "weightCount";
          break;
        case 7:
          // 垃圾分类督导
          request = garbageSortingCommunityCount;
          dataKey = "sortingTypeBoList";
          labelKey = "supervisionType";
          valueKey = "sortingTypeCount";
          break;
        case 8:
          // 四害消杀
          request = disinfectionCommunityCount;
          dataKey = "disinfectionLocationTypeBoList";
          labelKey = "locationType";
          valueKey = "locationCount";
          break;
        case 9:
          // 一体化维修
          request = maintenanceCommunityCount;
          dataKey = "maintenanceProjectTypeBoList";
          labelKey = "projectType";
          valueKey = "projectCount";
          break;
        default:
          break;
      }
      if (request == "") {
        this.cardList.forEach((item) => {
          item.data = {};
          this.formList.forEach((el) => {
            item.data[el.field] = 0;
          });
        });
        return;
      }
      const params = {};
      request(params).then((res) => {
        const dataMap = res.data ?? {};
        this.cardList.forEach((item) => {
          const key = item.title;
          const obj = dataMap[key];
          item.data = {};
          this.formList.forEach((el) => {
            let value = 0;
            if (el.is_regular) {
              value = this.getField(obj, el.field);
            } else if (el.is_reduce) {
              value =
                obj?.[el.field]?.reduce((prev, curr) => {
                  const count = curr?.[el.lenField] ?? 0;
                  return prev + count;
                }, 0) ?? 0;
            } else {
              const current = obj?.[dataKey]?.find(
                (key) => key[labelKey] == el.label || key[labelKey] == el.id
              );
              value = current?.[valueKey] ?? 0;
            }
            item.data[el.field] = value;
          });
        });
        // console.log(this.cardList);
      });
    },
    getField(row, field) {
      if (!field) return row;
      if (!row) return null;
      const fieldArr = field.split(".");
      const getCurrent = (data, prop) => {
        return data?.[prop] ?? 0;
      };
      let obj = JSON.parse(JSON.stringify(row));
      fieldArr.forEach((item) => {
        obj = getCurrent(obj, item);
      });
      return obj;
    },
    getMarkerList() {
      // 获取标记点数据
      let requestFun = "";
      if (this.leftActive == 3) {
        //市政公厕
        requestFun = toiletQueryToilet;
      } else if (this.leftActive == 5) {
        //公园管养
        requestFun = parkQueryPark;
      }
      if (requestFun == "") {
        return;
      }
      const params = {};
      requestFun(params).then((res) => {
        const pointArr = res.rows ?? [];
        let ajaxMarker = [];
        pointArr.forEach((item) => {
          ajaxMarker.push([
            item?.longitude ?? item?.attr1,
            item?.latitude ?? item?.attr2,
          ]);
        });
        // console.log(ajaxMarker.filter((item) => item[0]));
        if (ajaxMarker.length) {
          this.pointCollection(ajaxMarker.filter((item) => item[0]));
        }
      });
    },
    async chooseLeft(row) {
      // 左侧类别选择
      if (this.leftActive == row.type) {
        this.leftActive = "";
      } else {
        this.leftActive = row.type;
      }
      this.formList = [];
      // 获取类别统计展示字段
      const dataType = this.leftList.find(
        (item) => this.leftActive == item.type
      )?.dataType;
      if (dataType) {
        const list = await this.getDictData(dataType);
        this.formList = list.map((item, index) => {
          return {
            label: item.dictLabel,
            id: item.dictValue,
            field: item.dictLabel + "_" + index,
            unit: item.cssClass,
          };
        });
        if (this.leftActive == 5) {
          // 公园管养新增表单显示
          this.formList = [...this.parkForm, ...this.formList];
        }
        if (this.leftActive == 6) {
          // 垃圾收运新增表单显示
          this.formList = [...this.recycleForm, ...this.formList];
        }
      }
      this.formList = [...this.formList, ...this.commonForm];
      // console.log(this.formList)
      // 获取统计数据
      this.getCommunityCount();

      // 清空地图标记点
      this.map.clearOverlays();
      const markerList = [];
      // 获取数据
      const jsonData = this.markerJsonMap[this.leftActive];
      let color = "";
      if (jsonData) {
        const arr = jsonData.features;
        if (this.leftActive == 2 || this.leftActive == 4) {
          // 2清扫保洁 4道路绿化管养 5公园管养
          for (var i = 0; i < arr.length; i++) {
            const itemArr = arr[i].geometry.coordinates;
            for (var j = 0; j < itemArr.length; j++) {
              const pointArr = itemArr[j];
              for (var z = 0; z < pointArr.length; z++) {
                // 取坐标中心点
                const point = this.getCenterPoint(pointArr[z]);
                markerList.push([point.lng, point.lat]);
              }
            }
          }
        } else if (this.leftActive == 5) {
          // 5公园管养
          let newArr = [];
          for (var i = 0; i < arr.length; i++) {
            const itemArr = arr[i].geometry.coordinates;
            for (var j = 0; j < itemArr.length; j++) {
              const pointArr = itemArr[j];
              newArr = [...newArr, ...pointArr];
            }
          }
          color = "#909090";
          this.pointPolygon(newArr, color);

          this.getMarkerList();
          return;
        } else {
          for (var i = 0; i < arr.length; i++) {
            const point = arr[i].geometry.coordinates;
            markerList.push(point);
          }
        }
      }
      if (this.leftActive == 3) {
        color = "#909090";
      }
      this.pointCollection(markerList, color);

      this.getMarkerList();
      // const icon = this.leftList.find(
      //   (item) => item.type == this.leftActive
      // )?.icon;
      // const markerIcon = new BMap.Icon(icon, new BMap.Size(14, 14));
      // this.markerList.forEach((item) => {
      //   // 创建Marker标注，使用图标
      //   const marker = new BMap.Marker(new BMap.Point(item[0], item[1]), {
      //     icon: markerIcon,
      //   });
      //   // const marker = new BMap.Marker(new BMap.Point(item[0], item[1]));
      //   this.map.addOverlay(marker);
      // });
    },
    pointPolygon(regions, color = "#003CFF") {
      // 渲染区域
      for (var i = 0; i < regions.length; i++) {
        const item = regions[i];
        const arr = [];
        for (var j = 0; j < item.length; j++) {
          arr.push(new BMap.Point(item[j][0], item[j][1]));
        }
        // 绘制覆盖物
        const polygon = new BMap.Polygon(arr, {
          strokeColor: color,
          strokeWeight: 1,
          strokeOpacity: 1,
          fillColor: color,
          fillOpacity: 0.4,
        });
        this.map.addOverlay(polygon);
      }
    },
    pointCollection(markers, color = "#4887ff") {
      // 渲染海量点
      if (document.createElement("canvas").getContext) {
        // 判断当前浏览器是否支持绘制海量点
        var points = []; // 添加海量点数据
        for (var i = 0; i < markers.length; i++) {
          points.push(new BMap.Point(markers[i][0], markers[i][1]));
        }
        const size =
          markers.length > 200 ? BMAP_POINT_SIZE_SMALL : BMAP_POINT_SIZE_BIGGER;
        var options = {
          size: size,
          shape: BMAP_POINT_SHAPE_STAR,
          color: color,
        };
        var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
        // pointCollection.addEventListener("click", function (e) {
        //   console.log("单击点的坐标为：" + e.point.lng + "," + e.point.lat); // 监听点击事件
        // });
        this.map.addOverlay(pointCollection); // 添加Overlay
      } else {
        console.log("请在chrome、safari、IE8+以上浏览器查看");
      }
    },
    // 获取绘制地图的中心点
    getCenterPoint(path) {
      let x = 0.0;
      let y = 0.0;
      for (let i = 0; i < path.length; i++) {
        x = x + parseFloat(path[i][0]);
        y = y + parseFloat(path[i][1]);
      }
      x = x / path.length;
      y = y / path.length;
      return { lng: x, lat: y };
    },
    // 获取左侧列表
    getLeftList() {
      const params = {};
      homePageOverview(params).then((res) => {
        const data = res?.data ?? {};
        this.leftList.forEach((item) => {
          if (item.field && data[item.field]) {
            const row = data[item.field];
            item.list.forEach((el) => {
              if (el.field) {
                el.value = row?.[el.field] ?? 0;
              }
            });
          }
        });
      });
    },
    FormatTime() {
      // 返回显示的日期时间格式
      var date = new Date();
      var year = this.formatTime(date.getFullYear());
      var month = this.formatTime(date.getMonth() + 1);
      var day = this.formatTime(date.getDate());
      var hour = this.formatTime(date.getHours());
      var minute = this.formatTime(date.getMinutes());
      var second = this.formatTime(date.getSeconds());
      var weekday = date.getDay();
      var weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      var week = weeks[weekday];
      return `${year}-${month}-${day} ${hour}:${minute}:${second} ${week}`;
    },
    formatTime(n) {
      // 判断是否需要加0
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    },
    getDictData(dataType) {
      const storeDict = this.searchDictByKey(
        this.$store.getters.dict,
        dataType
      );
      if (storeDict) {
        return new Promise((resolve) => {
          resolve(storeDict);
        });
      } else {
        return new Promise((resolve, reject) => {
          getDicts(dataType)
            .then((res) => {
              this.$store.dispatch("dict/setDict", {
                key: dataType,
                value: res.data,
              });
              resolve(res.data);
            })
            .catch((error) => {
              reject(error);
            });
        });
      }
    },
    searchDictByKey(dict, key) {
      if (key == null && key == "") {
        return null;
      }
      try {
        for (let i = 0; i < dict.length; i++) {
          if (dict[i].key == key) {
            return dict[i].value;
          }
        }
      } catch (e) {
        return null;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: calc(100vh - 84px);
  overflow: auto;
  // padding: 16px;
  .home-warpper {
    min-width: 1260px;
    height: 100%;
  }
  .main-left {
    width: 440px;
    height: 100%;
    overflow-y: auto;
    .left-card {
      height: 96px;
      padding: 6px 10px 0;
      border-left: 4px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
      &.active {
        background: rgba(72, 135, 255, 0.1);
        border-color: #4887ff;
      }
      .left-title {
        height: 30px;
        padding: 0 6px;
        background: #f8f9fe;
        box-shadow: inset 0px 1px 0px rgba(72, 135, 255, 0.1);
        transition: all 0.2s ease;
        .title-icon {
          img {
            width: 20px;
            height: 20px;
          }
          img + span {
            margin-left: 10px;
          }
          span {
            font-size: 14px;
            color: #1b1b26;
            font-weight: 600;
          }
        }
        .title-progress {
          span {
            font-size: 14px;
            color: #74767d;
          }
          em {
            font-size: 16px;
            font-style: normal;
            color: #4887ff;
          }
        }
      }
      .item-list {
        margin-top: 8px;
        .left-item {
          label {
            font-size: 14px;
            color: #1c2f45;
          }
          span {
            color: #1c2f45;
            opacity: 0.8;
            font-size: 12px;
            margin-top: 8px;
          }
        }
      }
    }
  }
  .main-right {
    height: 100%;
    position: relative;
    .map {
      width: 100%;
      height: 100%;
    }
    .card-wrapper {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 4px;
      z-index: 10;
      .card + .card {
        margin-left: 4px;
      }
      .card {
        padding: 8px;
        border-radius: 4px;
        background: #ffffff;
        box-shadow: 0px 1px 2px -2px #000000, 0px 3px 6px #000000;
        .card-title {
          i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4dd5ff;
          }
          i + span {
            margin-left: 6px;
          }
          span {
            font-size: 16px;
            color: #1b1b26;
            font-weight: 600;
          }
        }
        .card-list {
          overflow: auto;
          margin-top: 8px;
          height: 180px;
          border-radius: 4px;
          background: #f7faff;
          // Safari/Chrome 中滚动条样式设置
          &::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            background: transparent;
          }

          // &::-webkit-scrollbar-thumb {
          //   border: 2px solid transparent;
          //   background-clip: content-box;
          //   background-color: rgba(255, 255, 255, 30%);
          //   border-radius: 8px * 2 - 1px;
          // }
          // // 滚动条比较窄，吸底时，实际操作点击选中比较困难，因此，增加滚动条需要悬浮态，引导用户使用和滚动
          // &::-webkit-scrollbar-thumb:vertical:hover,
          // &::-webkit-scrollbar-thumb:horizontal:hover {
          //   background-color: rgba(255, 255, 255, 60%);
          // }
          .card-item + .card-item {
            margin-top: 16px;
          }
          .card-item {
            height: 30px;
            padding: 0 16px;
            span + em {
              margin-left: 8px;
            }
            span {
              font-size: 14px;
              color: #74808f;
            }
            em {
              font-size: 14px;
              color: #1b1b26;
              font-style: normal;
            }
          }
        }
      }
    }
  }
}
</style>
